<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-app="c" ng-controller="c1">
<table class="table table-hover">
	<caption>悬停表格布局</caption>
	<thead>
		<tr>
			<th>名称</th>
			<th>状态</th>
			<th>故事</th>
			<th>修改</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="t in rs">
			<td>
			<span ng-hide='edit{{$index}}'>{{t.name}}</span>
			<input ng-show='edit{{$index}}'   type="text" ng-model="t.name">
			</td>
				<td>
			<span ng-hide='edit{{$index}}'>{{t.status}}</span>
			<input ng-show='edit{{$index}}'   type="text" ng-model="t.status">
			</td>
				<td>
			<span ng-hide='edit{{$index}}'>{{t.story}}</span>
			<input ng-show='edit{{$index}}'   type="text" ng-model="t.story">
			</td>
			<td>
			<button ng-hide='edit{{$index}}' type="button" class="btn btn-success" ng-click="update($index)">修改</button>
			<button ng-hide='edit{{$index}}' type="button" class="btn btn-danger" ng-click="deleteRecord(t,$index)">删除</button>
			<button ng-show='edit{{$index}}' type="button" class="btn btn-success" ng-click="update2(t,$index)">确定</button>
			<button ng-show='edit{{$index}}'  type="button" class="btn btn-success" ng-click="cancelUpdate($index)">取消</button>
			</td>
		</tr>
	</tbody>
</table>
<script>
var ap=angular.module("c",[]);
ap.controller("c1",function($scope){
	$scope.rs=[
		{name:'张三',status:'未开始',story:"1"},
		{name:'张五',status:'完成',story:"2"},
		{name:'张六',status:'关闭',story:"3"},
		{name:'张九',status:'进行中',story:"4"},
		{name:'张八',status:'未开始',story:"1"}
		]
	
	$scope.update=function(index){
		var id="edit"+index
		$scope[id]=true;
	}
	
	$scope.update2=function(t,index){
		//$scope.rs[index].name=t.name;
		var id="edit"+index
		$scope[id]=false;
	}
	
	$scope.deleteRecord=function(t,index){
		//splice方法   js数组删除某一个元素， 第一个参数是起点的下标，第二个参数是删除元素的个数
		$scope.rs.splice(index,1);
	}
	
	$scope.cancelUpdate=function(index){
		var id="edit"+index
		$scope[id]=false;
	}
	
});
</script>

</body>
</html>